"use strict";

var s = new URLSearchParams(location.search);
console.log(s.get('id'));
var l = s.get('id');
console.log(l);

function xiangqing() {
  var url = 'http://jx.xuzhixiang.top/ap/api/detail.php';
  axios.get(url, {
    params: {
      id: l
    }
  }).then(function (res) {
    console.log(res.data.data);
    var arr = res.data.data;
    var html = '';
    html += "\n        <div class=\"litimg\">\n                <img src=\"".concat(arr.pimg, "\" alt=\"\">\n                <div class=\"zoom\"></div>\n            </div>\n            <div class=\"bigimg\">\n                    <img src=\"").concat(arr.pimg, "\" alt=\"\">\n                </div>\n            <div class=\"underimg\">\n            </div>\n            \n         ");
    var list = document.querySelector('.spec');
    list.innerHTML = html;
    var html1 = '';
    html1 += "\n        <div class=\"item-title\">".concat(arr.pname, "</div>\n        <div class=\"dd\">\u4EAC\u4E1C\u4EF7&nbsp;").concat(arr.pprice, "</div>\n        <div class=\"procart\">\n                <div class=\"choose-amount\">\n            \n                    <input type=\"text\" value=\"1\" class=\"math\">\n                    <input type=\"button\" value=\"-\" class=\"minus\">\n                    <input type=\"button\" value=\"+\" class=\"plus\">\n\n                </div>\n\n                <input type=\"button\" value=\"\u52A0\u5165\u8D2D\u7269\u8F66\" class=\"addcart\">\n                \n             </div>\n        ");
    var list1 = document.querySelector(".item-right");
    list1.innerHTML = html1;
    var Zoom = document.querySelector(".zoom");
    var bigimg = document.querySelector(".bigimg");
    var litimg = document.querySelector(".litimg");
    var Bigimg = bigimg.children[0];

    litimg.onmouseover = function () {
      Zoom.style.display = "block";
      bigimg.style.display = "block";
    };

    litimg.onmouseout = function () {
      Zoom.style.display = "none";
      bigimg.style.display = "none";
    };

    litimg.onmousemove = function (e) {
      var evt = e || window.event;
      var x = evt.pageX - list.offsetLeft - Zoom.offsetWidth / 2;
      var y = evt.pageY - list.offsetTop - Zoom.offsetHeight / 2;
      var mx = litimg.offsetWidth - Zoom.offsetWidth;
      var my = litimg.offsetHeight - Zoom.offsetHeight;
      x = x <= 0 ? 0 : x >= mx ? mx : x;
      y = y <= 0 ? 0 : y >= my ? my : y;
      Zoom.style.left = x + "px";
      Zoom.style.top = y + "px";
      Bigimg.style.left = -Zoom.offsetLeft * (Bigimg.offsetWidth / litimg.offsetWidth) + "px";
      Bigimg.style.top = -Zoom.offsetTop * (Bigimg.offsetHeight / litimg.offsetHeight) + "px";
    };

    Addcartdata();
  });
}

xiangqing();

function Addcartdata() {
  var uid = localStorage.getItem('uid');
  localStorage.getItem(uid);
  var Math = document.querySelector(".math");
  var Minus = document.querySelector(".minus");
  var Plus = document.querySelector(".plus");
  var Addbtn = document.querySelector(".addcart");
  var count = Math.value; // console.log(count);

  Minus.onclick = function () {
    if (Math.value <= 1) {
      Math.value = 1;
    } else {
      Math.value--;
    }
  };

  Plus.onclick = function () {
    Math.value++; // console.log(1)
  };

  Addbtn.onclick = function () {
    var url = 'http://jx.xuzhixiang.top/ap/api/add-product.php';
    var pnum = Math.value; // console.log(pnum)

    axios.get(url, {
      params: {
        uid: uid,
        pid: l,
        pnum: pnum
      }
    }).then(function (res) {
      console.log(res.data);
    });
  };
}